<template>
  <div class="user">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="用户界面" :placeholder="true" :fixed="true" right>
      <template #left>
        <van-icon
          @click="onClickLeft"
          class-prefix="iconfont"
          name="31fanhui1"
          size="18"
        />
      </template>
      <template #right>
        <van-icon class-prefix="iconfont" name="gengduo1" size="18" />
      </template>
    </van-nav-bar>
    <!-- 用户卡片 -->
    <div class="userCard">
      <van-row type="flex">
        <!-- 用户卡片左边 -->
        <van-col span="16"
          ><van-row type="flex" align="center">
            <!-- 头像 -->
            <van-col offset="1"
              ><van-image
                round
                width="66px"
                height="66px"
                src="https://90416.com/cMp"
            /></van-col>
            <!-- 头像右边信息 -->
            <van-col offset="1">
              <p>zxx</p>
              <p>用户名:zxx</p>
              <p>13312345678</p>
            </van-col>
          </van-row>
        </van-col>
        <!-- 用户卡片右边 -->
        <van-col offset="2"
          ><van-icon class-prefix="iconfont" name="gerenzhongxin"></van-icon>
          <span>账号管理</span></van-col
        >
      </van-row>
    </div>
    <van-grid :column-num="4">
      <van-grid-item
        icon-prefix="iconfont"
        icon="shouye"
        color="#DD9E58"
        text="待付款"
      ></van-grid-item>
      <van-grid-item
        icon-prefix="iconfont"
        icon="shouye"
        color="#DD9E58"
        text="待收货"
      ></van-grid-item>
      <van-grid-item
        icon-prefix="iconfont"
        icon="shouye"
        color="#DD9E58"
        text="已完成"
      ></van-grid-item>
      <van-grid-item
        icon-prefix="iconfont"
        icon="shouye"
        color="#DD9E58"
        text="全部订单"
      ></van-grid-item>
    </van-grid>
    <van-row type="flex" justify="space-around" class="mato textCenter">
      <van-row type="flex">
        <van-col span="24">20</van-col>
        <van-col span="24">关注的商品</van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="24">5</van-col>
        <van-col span="24">收藏的商品</van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="24">10</van-col>
        <van-col span="24">我的足迹</van-col>
      </van-row>
    </van-row>
    <!-- 为你推荐  -->
    <p class="mato">&nbsp;&nbsp;为你推荐</p>
    <!-- 商品 -->
    <van-grid :border="true" :column-num="3">
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
        <!-- <van-tag>标签</van-tag> -->
        <p>
          <span class="prceSizeCon"
            >PaulFrank大嘴猴2019新款 长袖T恤女秋季圆领休闲打底</span
          ><br /><span class="prceSize">￥8988</span>
        </p>
      </van-grid-item>
    </van-grid>

    用户 <Tabbar />
  </div>
</template>

<script>
import Vue from 'vue';
import {
  NavBar, Icon, Col, Row, Image as VanImage, Grid, GridItem, Tag, Toast,
} from 'vant';
import Tabbar from '@/components/tabbar.vue';

Vue.use(Tag);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(VanImage);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(NavBar);
export default {
  name: 'Home',
  data() {
    return {};
  },
  components: {
    Tabbar,
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.user {
  background-color: rgb(238, 236, 236);
}
.userCard {
  margin: 15px;
  padding: 6px;
  border-radius: 10px;
  background: lightcoral;
}
.textCenter {
  text-align: center;
}
.mato {
  margin-top: 20px;
  padding: 20px 0;
  background-color: white;
}
.prceSizeCon {
  font-size: 14px;
}
.prceSize {
  color: #f00;
  font-size: 18px;
  font-weight: 700;
}
</style>
